<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>流程配置管理</title>
    <link rel="stylesheet" href="../../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../../lib/font-awesome/css/font-awesome.min.css">
    <script type="text/javascript" src="../../../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../../../lib/xe-utils/xe-utils.js"></script>
    <script type="text/javascript" src="../../../lib/element-ui/index.js"></script>
    <script type="text/javascript" src="../../../lib/vxe-table/index.js"></script>
    <script type="text/javascript" src="../../../lib/vxe-table-plugin-element/index.js"></script>
    <script type="text/javascript" src="../../../lib/xlsx/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
    <script type="text/javascript" src="../../../lib/xe-ajax/xe-ajax.js"></script>
    <script type="text/javascript" src="../../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../../static/js/webApi.js"></script>
    <style type="text/css">
        /*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
        html,body,#app,.el-container{
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
        }
        .el-main{
            padding: 4px;
        }
    </style>
</head>
<body>
<el-container id="app">
    <el-main>
        <el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right" size="mini" style="height: 35px;border: 1px solid #e8eaec;">
            <el-form-item label="业务编码">
                <el-input v-model="queryData.bizCode" placeholder="请输入业务编码"></el-input>
            </el-form-item>
            <el-form-item label="业务名称">
                <el-input v-model="queryData.bizName" placeholder="请输入业务名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="searchEvent('queryData',1)">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh-right" @click="searchEvent('queryData',0)">重置</el-button>
            </el-form-item>
        </el-form>

        <vxe-grid
                border
                stripe
                ref="xGrid"
                resizable
                show-overflow
                highlight-current-row="true"
                keep-source
                :height="tableHeight"
                size="mini"
                :radio-config="tableRadio"
                :pager-config="tablePage"
                :proxy-config="tableProxy"
                :toolbar="tableToolbar"
                :export-config="tableExport"
                @cell-dblclick="cellDBLClickEvent"
                :edit-config="{trigger:'click', mode:'row'}"
                @toolbar-button-click="toolbarButtonClickEvent">
            <vxe-table-column type="radio" width="60" headerAlign="center" align="center"></vxe-table-column>

            <vxe-table-column type="seq" title="序号" width="60" align="center" headerAlign="center" align="center"></vxe-table-column>
            <vxe-table-column field="bizCode" title="业务编码" width="100" headerAlign="center" align="center"></vxe-table-column>
            <vxe-table-column field="bizName" title="业务名称" width="180" headerAlign="center" align="left"></vxe-table-column>
            <vxe-table-column field="modelKey" title="流程KEY" width="100" headerAlign="center" align="center"></vxe-table-column>
            <vxe-table-column field="editUrl" title="编辑URL" width="200" headerAlign="center" align="left"></vxe-table-column>
            <vxe-table-column field="lookUrl" title="查看URL" width="200" headerAlign="center" align="left"></vxe-table-column>
            <vxe-table-column field="todoUrl" title="审核URL" width="200" headerAlign="center" align="left"></vxe-table-column>
            <vxe-table-column field="printNode" title="打印节点" width="200" headerAlign="center" align="left"></vxe-table-column>
            <vxe-table-column field="status" title="状态" width="80" headerAlign="center"  align="center">
                <template v-slot="{ row }">
                    <el-switch v-model="row.status==1?true:false" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </template>
            </vxe-table-column>
            <vxe-table-column field="createUser" title="创建人" width="80" headerAlign="center" align="center" :visible="visible"></vxe-table-column>
            <vxe-table-column field="createDate" title="创建日期" width="120" headerAlign="center" align="center" :formatter="formatDate" :visible="visible"></vxe-table-column>
            <vxe-table-column field="updateUser" title="修改人" width="80" headerAlign="center" align="center" :visible="visible"></vxe-table-column>
            <vxe-table-column field="updateDate" title="修改日期" width="120" headerAlign="center" align="center" :formatter="formatDate" :visible="visible"></vxe-table-column>
            <vxe-table-column field="id" title="流程配置ID" width="100" headerAlign="center" align="center" :visible="visible"></vxe-table-column>
            <vxe-table-column title="操作" width="180" headerAlign="center" align="center" show-overflow>
                <template v-slot="{ row }">
                    <vxe-button type="text" icon="fa fa-edit vxe-primary-color" @click="editEvent(row)" title="编辑"></vxe-button>
                    <vxe-button type="text" icon="fa fa-trash-o vxe-danger-color" @click="removeEvent(row)" title="删除"></vxe-button>
                    <template v-if="row.status===1">
                        <vxe-button type="text" icon="fa fa-pause vxe-danger-color"  @click="statusEvent(row,0)" title="停用"></vxe-button>
                    </template>
                    <template v-if="row.status===0">
                        <vxe-button type="text" icon="fa fa-play vxe-success-color" :visible="visible" @click="statusEvent(row,1)" title="启用"></vxe-button>
                    </template>
                </template>
            </vxe-table-column>
        </vxe-grid>

        <vxe-modal ref="xModal" v-model="showEdit" :title="selectRow ? '编辑&保存' :'新增&保存'" width="800" :loading="submitLoading" resize destroy-on-close>
            <el-form :model="formData" :rules="formRules" ref="formData" label-width="80px" label-position="right" size="mini">
                <template v-if="visible===true">
                    <el-form-item label="流程配置ID" prop="id">
                        <el-input v-model="formData.id"></el-input>
                    </el-form-item>
                </template>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="业务编码" prop="bizCode">
                            <el-input v-model="formData.bizCode" placeholder="请输入业务编码，保存后将无法修改业务编码！" maxlength="32" :disabled="selectRow!=null"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="业务名称" prop = "bizName">
                            <el-input v-model="formData.bizName" placeholder="请输入业务名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="流程KEY" prop="modelKey">
                    <el-input v-model="formData.modelKey" placeholder="请输入流程KEY"></el-input>
                </el-form-item>
                <el-form-item label="编辑地址">
                    <el-input type="textarea" v-model="formData.editUrl" :autosize="{ minRows: 2, maxRows: 4}"
                              placeholder="请输入编辑地址" maxlength="200" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="查看地址">
                    <el-input type="textarea" v-model="formData.lookUrl" :autosize="{ minRows: 2, maxRows: 4}"
                              placeholder="请输入查看地址" maxlength="200" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="办理地址">
                    <el-input type="textarea" v-model="formData.todoUrl" :autosize="{ minRows: 2, maxRows: 4}"
                              placeholder="请输入办理地址" maxlength="200" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="打印节点">
                    <el-input type="textarea" v-model="formData.printNode" :autosize="{ minRows: 2, maxRows: 4}"
                              placeholder="请输入打印节点" maxlength="200" show-word-limit></el-input>
                </el-form-item>

                <el-form-item style="text-align: right;">
                    <el-button type="primary" icon="el-icon-folder" @click="submitEvent('formData')" :disabled="disabled">保存</el-button>
                    <el-button type="warning" icon="el-icon-refresh-right" @click="resetEvent('formData')">重置</el-button>
                    <el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('formData')">退出</el-button>
                </el-form-item>
            </el-form>
        </vxe-modal>
    </el-main>
</el-container>
</body>
<script type="text/javascript">
    window.onload = function () {
        var main =  {
            data () {
                return {
                    loading:false,
                    disabled:false,
                    visible:false,
                    tableHeight:'100%',
                    tablePage:{
                        perfect: true,
                        total: 0,
                        currentPage: 1,
                        pageSize: 15,
                        align: 'left',
                        pageSizes: [15, 30, 45, 60, 75, 90],
                        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
                    },
                    tableProxy:{
                        props:{
                            result:'data.rows',
                            total:'data.total'
                        },
                        ajax:{
                            // 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax） page 对象： { pageSize, currentPage }
                            query:({ page, sort, filters }) => {
                                // 处理排序条件
                                let queryParams = Object.assign({
                                    sort:sort.property,
                                    order:sort.order
                                }, this.queryData);
                                // 处理筛选条件
                                filters.forEach(({ column, property, values }) => {
                                    queryParams[property] = values.join(',')
                                });
                                //console.info(queryParams);
                                return XEAjax.get(`${curlFinance}/bizConfig/getBizConfigList?currentPage=${page.currentPage}&pageSize=${page.pageSize}`, queryParams);

                            }
                        }
                    },
                    tableToolbar:{
                        id:'toolbar',
                        size:'mini',
                        perfect:true,
                        buttons:[
                            { code:'btnInsert', name:'新增', status:'perfect', icon:'fa fa-plus vxe-primary-color' },
                          /*  { code:'btnRemove', name:'删除', status:'perfect', icon:'fa fa-trash-o vxe-danger-color' },
                            { code:'btnSave', name:'保存', status:'perfect', icon:'fa fa-save vxe-success-color' },*/
                            { code:'btnExport', name:'导出', status:'perfect', icon:'fa fa-file-excel-o vxe-info-color' }
                        ],
                        refresh:{
                            icon:'fa fa-refresh',
                            iconLoading:'fa fa-spinner fa-spin'
                        },
                        zoom:{
                            iconIn:'fa fa-arrows-alt',
                            iconOut:'fa fa-expand'
                        },
                        custom:{
                            icon:'fa fa-cog',
                            storage: true,
                            checkMethod: this.checkColumnMethod
                        }
                    },
                    tableExport:{
                        filename:'export',
                        sheetName:'Sheet1',
                        type:'xlsx',
                        // 自定义类型
                        types:['xlsx', 'csv', 'html', 'xml', 'txt']
                    },
                    tableRadio:{
                        trigger :'row'
                    },
                    submitLoading:false,
                    selectRow:null,
                    showEdit:false,
                    queryData:{
                        bizCode:null,
                        bizName:null
                    },
                    formData:{
                        id:null,
                        bizCode:null,
                        bizName:null,
                        modelKey:null,
                        editUrl:null,
                        lookUrl:null,
                        todoUrl:null,
                        printNode:null
                    },
                    formRules:{
                        bizCode:[
                            { required:true, message:'请输入业务编码' },
                            { min:1, max:32, message:'长度在1到32个字符' }
                        ],
                        bizName:[
                            { required:true, message:'请输入业务名称' },
                            { min:1, max:200, message:'长度在1到200个字符' }
                        ],
                        modelKey:[
                            { required:true, message:'请输入对应流程KEY' }
                        ]
                    }
                }
            },
            mounted () {
                this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 5;
                //window.innerHeight:浏览器的可用高度
                //this.$refs.table.$el.offsetTop：表格距离浏览器的高度
                //后面的50：根据需求空出的高度，自行调整
            },
            methods:{
                searchEvent (formName,acType) {
                    if(acType==0){
                        this.queryData = {
                            bizCode:null,
                            bizName:null
                        }
                        this.$refs[formName].resetFields();
                    }
                    this.$refs.xGrid.commitProxy('reload');
                },
                formatDate ({ cellValue }) {
                    return XEUtils.toDateString(cellValue, 'yyyy-MM-dd')
                },
                toolbarButtonClickEvent ({ code }, event) {
                    switch (code) {
                        case 'btnInsert':
                            this.insertEvent();
                            break;
                        case 'btnExport':
                            this.$refs.xGrid.exportData({
                                filename:'流程配置列表',
                                sheetName:'Sheet1',
                                type:'xlsx'
                            });
                            break;
                    }
                },
                insertEvent(){
                    this.formData = {
                        id:null,
                        bizCode:null,
                        bizName:null,
                        modelKey:null,
                        editUrl:null,
                        lookUrl:null,
                        todoUrl:null,
                        printNode:null
                    };
                    this.selectRow = null;
                    this.showEdit = true;
                },
                submitEvent (formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.submitLoading = true;
                            this.disabled = true;
                            let params = Object.assign(this.formData);
                            XEAjax.post(`${curlFinance}/bizConfig/save`, params).then(data => {
                                if(data.code==200){
                                    this.$refs.xGrid.commitProxy('reload');
                                    this.$XModal.message({ message:data.msg, status:'success' });
                                    this.showEdit = false;
                                }else{
                                    this.$XModal.message({ message:data.msg, status:'error' });
                                }
                                this.disabled = false;
                            });
                            this.submitLoading = false;
                        } else {
                            return false;
                        }
                    });
                },
                resetEvent(formName) {
                    this.formData = {
                        id:null,
                        bizCode:null,
                        bizName:null,
                        modelKey:null,
                        editUrl:null,
                        lookUrl:null,
                        todoUrl:null,
                        printNode:null
                    };
                    this.selectRow = null;
                    this.$refs[formName].resetFields();
                },
                closeEvent(formName) {
                    this.showEdit = false;
                },
                editEvent (row) {
                    this.formData = {
                        id:row.id,
                        bizCode:row.bizCode,
                        bizName:row.bizName,
                        modelKey:row.modelKey,
                        editUrl:row.editUrl,
                        lookUrl:row.lookUrl,
                        todoUrl:row.todoUrl,
                        printNode:row.printNode
                    };
                    this.selectRow = row;
                    this.showEdit = true;
                },
                removeEvent (row) {
                    this.$XModal.confirm('您确定要删除该数据?').then(type => {
                        if (type === 'confirm') {
                            this.submitLoading = true;
                            let params = Object.assign(row);
                            XEAjax.post(`${curlFinance}/bizConfig/remove`, params).then(data => {
                                this.$refs.xGrid.commitProxy('reload');
                                this.$XModal.message({ message:data.msg, status:'success' });
                            });
                            this.submitLoading = false;
                        }
                    });
                },
                statusEvent(row,status){
                    var msg = status==1?'您确定要启用该数据？':'您确定要停用该数据？';
                    this.$XModal.confirm(msg).then(type => {
                        if (type === 'confirm') {
                            this.submitLoading = true;
                            let params = Object.assign({
                                id:row.id,
                                status:status
                            });
                            XEAjax.post(`${curlFinance}/bizConfig/setStatus`, params).then(data => {
                                this.$refs.xGrid.commitProxy('reload');
                                this.$XModal.message({ message:data.msg, status:'success' });
                            });
                            this.submitLoading = false;
                        }
                    });
                },
                cellDBLClickEvent ({ row }) {
                    this.editEvent(row);
                },
                checkColumnMethod ({ column }) {
                    if (['bizCode','bizName'].includes(column.property)) {
                        return false
                    }
                    return true
                }
            }
        };

        var vue = Vue.extend(main);
        new vue().$mount('#app');
    }
</script>
</html>
